/*
 * @Author: ly
 * @Date: 2019-10-01 16:31:28
 * @Last Modified by: ly
 * @Last Modified time: 2019-11-12 14:57:33
 */
import React, { MouseEvent } from 'react';

import Item from './item';

import { getMoveWidth, createItems } from '../utils/functions';

let interval: any = null;
// let count = 0

interface IRedpacketRainConfig {
  willStart: boolean;
  willStop: boolean;
  frameRate: number;
  viewportWidth: number;
  viewportHeight: number;
  moveWidth: number;
  redpacketHeight: number;
  redpacketWidth: number;
  redpacketFate: number;
  starFate: number;
  starHeight: number;
  starWidth: number;
  durationMin: number;
  durationMax: number;
  delayMin: number;
  delayMax: number;
}

const redpacketRainConfig: IRedpacketRainConfig = {
  willStart: false,
  willStop: false,
  frameRate: 20,
  viewportWidth: 800,
  viewportHeight: 600,
  moveWidth: 0,
  redpacketHeight: 100,
  redpacketWidth: 88,
  redpacketFate: 8,
  starHeight: 40,
  starWidth: 40,
  starFate: 2,
  durationMin: 1000,
  durationMax: 1500,
  delayMin: 0,
  delayMax: 0,
};

interface IItemsProps {
  duration: number;
  countdown: number;
  catchRedpacket: () => void;
}
interface IItem {
  key: number;
  type: string;
  delay: number;
  duration: number;
  top: number;
  left: number;
  startTop: number;
  startLeft: number;
  endTop: number;
  endLeft: number;
}
interface IItemsState {
  items: IItem[];
}
export default class Items extends React.PureComponent<IItemsProps> {
  public state: IItemsState = {
    items: [],
  };

  public static getDerivedStateFromProps = (nextProps: IItemsProps, prevState: IItemsState) => {
    // console.log('getDerivedStateFromProps', nextProps, prevState);
    if (nextProps.countdown < 0 && nextProps.duration > 0 && !prevState.items.length) {
      redpacketRainConfig.willStart = true;
      redpacketRainConfig.delayMax = nextProps.duration * 1000 - redpacketRainConfig.durationMax;
    }
    if (nextProps.countdown < 0 && nextProps.duration < 0 && prevState.items.length) {
      redpacketRainConfig.willStop = true;
    }
    return { duration: nextProps.duration };
  };

  render() {
    // console.log('renderItems',this.props.duration > 0 && this.state.items.length > 0,++count)
    return (
      this.props.duration >= 0
            && this.props.countdown < 0
            && this.state.items.length > 0
            && this.state.items.map((item: IItem) => (
              <Item key={item.key} type={item.type} top={item.top} left={item.left} clickHandler={this.catchRedpacket} />
            ))
    );
  }

  componentDidMount() {
    if (window.innerWidth > 800) {
      redpacketRainConfig.viewportWidth = window.innerWidth;
    }
    if (window.innerHeight > 600) {
      redpacketRainConfig.viewportHeight = window.innerHeight;
    }
    redpacketRainConfig.moveWidth = getMoveWidth(redpacketRainConfig.viewportHeight);

    clearInterval(interval);
    interval = setInterval(() => {
      let {items} = this.state;
      if (redpacketRainConfig.willStart) {
        redpacketRainConfig.willStart = false;
        this.setState({ items: createItems(redpacketRainConfig, this.props.duration) });
      }
      if (redpacketRainConfig.willStop) {
        redpacketRainConfig.willStop = false;
        items = [];
        this.setState({ items });
      }
      if (items.length) {
        const newItems = [];
        for (let i = 0; i < items.length; i++) {
          const item: IItem = items[i];
          if (item.top < item.endTop) {
            if (item.delay >= 0) {
              item.delay -= redpacketRainConfig.frameRate;
            } else {
              const stepX = ((item.endLeft - item.startLeft) / item.duration) * redpacketRainConfig.frameRate;
              const stepY = ((item.endTop - item.startTop) / item.duration) * redpacketRainConfig.frameRate;
              item.top += stepY;
              item.left += stepX;
            }
            newItems.push(item);
          }
        }
        this.setState({
          items: newItems,
        });
      }
    }, redpacketRainConfig.frameRate);
  }

  // componentWillUnmount() {
  //     clearInterval(interval);
  //     interval = null;
  // }

  private catchRedpacket = (event: MouseEvent) => {
    event.stopPropagation();
    this.setState({
      items: [],
    });
    this.props.catchRedpacket();
  };
}
